feat: Adapt time to fiori3 #801
Conversation
|
Deploy preview for fundamental-styles ready! Built with commit 3541f5c |
| @@ -7,31 +7,221 @@ $block: #{$fd-namespace}-time; | |||
| .#{$block} { | |||
| @include fd-reset(); | |||
|
|
|||
| width: 184px; // Quick fix to solve overflow issue | |||
| $fd-time-item-height: 2.875rem; | |||
There was a problem hiding this comment.
should be 2 rem for cozy mode, it only gets bigger for smaller applications like tablet and phone
There was a problem hiding this comment.
Hello @stefan-sto compact mode has 2rem, default one has 2.875rem
There was a problem hiding this comment.
@JKMarkowski I think this is the wrong Stefano ;)
src/time.scss
Outdated
| height: $fd-time-item-compact-height; | ||
| overflow: hidden; | ||
| white-space: nowrap; | ||
| text-overflow: ellipsis; |
There was a problem hiding this comment.
we need to define a max-width for the overflow, ask the designers
There was a problem hiding this comment.
Hello @stefan-sto I think max width should be 100% there. With text elipsis
There was a problem hiding this comment.
@JKMarkowski wrong Stefano
|
@trilodge can you review the PR from a11y point of view? |
|
we can review but merge once version |
src/time.scss
Outdated
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; |
There was a problem hiding this comment.
You can use fd-flex-vertical-center() {flex-direction: column;}
src/time.scss
Outdated
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| justify-content: center; |
There was a problem hiding this comment.
You can use @include fd-flex-center() {flex-direction: column;}
src/time.scss
Outdated
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; |
There was a problem hiding this comment.
@include fd-flex-center()
src/time.scss
Outdated
| align-items: center; | ||
| justify-content: center; |
There was a problem hiding this comment.
Is this working with display: block?
src/time.scss
Outdated
| overflow: hidden; | ||
| white-space: nowrap; | ||
| text-overflow: ellipsis; |
There was a problem hiding this comment.
You can use @include fd-ellipsis()
|
I don't think it's allowed to have this situation
|
|
The width of the label should be the same as the sliders |
There is no way to handle issues like that in pure css |
I was afraid you will say so :D We will fix it in NGX then |
|
Looks great, just 1 tiny issue with RTL (the text is not centered)
|
|
@InnaAtanasova I just removed |
|
|
|
@stefanoScalzo Everything works fine, it's just about the uglify variables for tests |
Related Issue
Closes #577
Description
There is whole time component refactored, right now it follows all of fiori3 specs. Also there are SAP theming parameters used.
Breaking Changes:
Refactored markup for time/time picker.
Removed Classes:
fd-time__controlNew modes:
fd-time(--compact/--tablet/--collapsible)New elements:
fd-time__colfd-time__slider-labelfd-time__wrapper(--active/--meridian)fd-time__item(--collapsed)fd-time__unitScreenshots
Before:
TimePicker:
After:
Cozy:
Tablet:
Compact:
Time Picker:
